import { useState, useEffect,useRef } from 'react';
import styles from './style.less';
import { } from '@ant-design/icons';
import ProjectIcon from '@/components/projectIcon';
import { Avatar,Tag } from 'antd';






const Task = (props) => {
    const {
        task,
        provided={
            innerRef:useRef()
        },
    } = props;

  

    const tagRender = (
        task.tags  ? 
        task.tags.map(tag => {
        return <Tag color={tag.color} className={styles.tag} >{tag.name}</Tag>
        })  :  ''
    );

    return (<div className={styles.container} 
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        >
        <div>
            {task.name}
        </div>
        <div className={styles.mainInfo}>
            <Avatar size={30} className={styles.userName}>{task.user ? task.user.nickName:'未知'}</Avatar>
            <div className={styles.costTime}><div>{task.costTimeCnt}</div> <div className={styles.timeUnitClass}>{task.costTimeCnt == 1 ? 'D' : 'H'}</div></div>
        </div>
        <div className={styles.dateSchdule}>{task.startDate} - {task.endDate}</div>
    <div>{tagRender}</div>
    </div>);
}
Task.defaultProps = {
    task: {
        name: '任务',
        user: {
            nickName: 'Grety',
            avatarUrl: '',
            username: '',
        },
        startDate: '2020-09-18',
        endDate: '2020-10-18',
        costTimeCnt: 1,
        costTimeUnit: 1,
        tags: [{
            color:'#DC143C',
            name:'测试'
        },{
            color:'#BA55D3',
            name:'测试'
        },{
            color:'#6495ED',
            name:'测试testhh'
        }]
    }
}

export default Task;
